<template>
    <div>
        <div>
            <div>
                <el-input
                        size="small"
                        class="addPosInput"
                        placeholder="添加职位..."
                        prefix-icon="el-icon-plus"
                        v-model="pos.name">
                </el-input>
                <el-button icon="el-icon-plus" size="small" type="primary" @click="addPositions">添加</el-button>
            </div>

            <div class="posManaMain">
                <el-table
                        :data="positions"
                        border
                        stripe
                        size="small"
                        style="width: 70%" @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="职位名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="createDate"
                            label="创建时间">
                    </el-table-column>

                    <el-table-column
                            prop="enabled"
                            label="启用状态">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
                            <el-tag v-else type="danger">未启用</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="showEditView(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="danger" size="small" style="margin-top: 10px"
                           :disabled="multipleSelection.length==0"
                           @click="deleteMany">批量删除
                </el-button>

            </div>
        </div>

        <el-dialog
                title="编辑职位"
                :visible.sync="dialogVisible"
                width="30%"
                >
            <div>
                <el-tag>职位名称</el-tag>
                <el-input v-model="updatePos.name" size="small"
                          class="updatePosInput"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="toUpdatePos">确 定</el-button>
      </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "PosMana",
        data(){
            return{
                pos:{
                    name:''
                },
                positions:[],
                dialogVisible:false,
                //用于接收 修改的职位 属性
                updatePos:{
                    name:''
                },
                multipleSelection:[]
            }
        },
        mounted(){ // 页面加载数据钩子函数
            this.initPositions();
        },
        methods:{
            handleSelectionChange(val){
                this.multipleSelection=val;
            },
            //批量删除操作
            deleteMany(){

                this.$confirm('此操作将永久【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //批量删除 删除之前 需要获取到 多个id值
                     let ids='?';
                     // ?ids=1&ids=2&ids=3
                     this.multipleSelection.forEach(item=>{
                         console.log(item);
                         ids+='ids='+item.id+'&';
                         console.log(ids)
                     })
                    //掉后端 删除职位的api接口
                    this.deleteRequest('/system/basic/pos/'+ids)
                        .then(resp=>{
                            if(resp){
                                //刷新一下 表格数据
                                this.initPositions();
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            //修改职位信息
            toUpdatePos(){
                this.putRequest('/system/basic/pos/',this.updatePos).then(resp=>{
                    if(resp){
                        //刷新数据
                        this.initPositions();
                        this.dialogVisible=false; //取消弹窗
                        this.updatePos.name='';
                    }
                })
            },
            // 添加 职位信息
            addPositions(){
                if(this.pos.name!=null&&this.pos.name!=''){
                    this.postRequest('/system/basic/pos/',this.pos)
                        .then(resp=>{
                            if(resp){
                                //如果添加成功 刷新表格数据
                                this.initPositions();
                            }
                        })
                }

            },
            //初始化数据
            initPositions(){
                //发起 请求 获取 职位信息
                this.getRequest('/system/basic/pos/').then(resp=>{
                    if(resp){
                        console.log(resp)
                        this.positions=resp;
                    }
                })
            },
            //显示编辑弹框
            //编辑职位信息
            //点击编辑之后拿到当前的数据行 放到updatePos
            showEditView(index,data){
                Object.assign(this.updatePos,data);
                this.updatePos.createDate='';
                //弹窗
                this.dialogVisible=true;
            },
            /**
             * 数据行的索引 data 当前行的数据
             * @param index
             * @param data
             */
            handleDelete(index,data){

                this.$confirm('此操作将永久【'+data.name+'】该职位, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   //掉后端 删除职位的api接口
                    this.deleteRequest('/system/basic/pos/'+data.id)
                        .then(resp=>{
                         if(resp){
                             //刷新一下 表格数据
                             this.initPositions();
                         }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }
        }
    }
</script>

<style>
    .addPosInput{
        width: 300px;
        margin-right: 8px
    }
    .posManaMain{
        margin-top: 10px;
    }
</style>
